<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的使用</title>
    <!--引入vue， 开发环境-->
    <script src="./js/vue-2.5.16.js"></script>
    <style>
        #app {
            font-size: 20px;
            color: green;
        }
        .f_r {
            color: red;
        }
        .student span{
            display: inline-block;
            padding: 10px;
            margin: 10px;
            border: 1px solid  #ddd;
            background-color: #f9f9f9;
            color:#000;
            border-radius: 10px;
        }
        .input01 input {
            width: 60px;
            height: 30px;
            border: 1px solid #ddd;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Vue的使用</h1>
    <div id="app">
        <p>[[ message ]] </p>
        <p class="f_r">[[ loginMsg ]]</p>
        <p>
            <a :href="baidu_url" target="_blank">百度</a>
            <a :href="tengxun_url" target="_blank">腾讯</a>
        </p>
        <hr>
        <!-- if条件渲染 -->
        <!-- v-if语句 -->
        <p v-if="seen">你能看见我吗？</p>
        <!-- v-if语句 -->
        <p v-if="isLogin">个人中心</p>
        <p v-else>登录</p>
        <!-- v-if 、 v-else-if、 v-else -->
        <p>
            成绩等级：
            <span v-if="level === 1">A</span>
            <span v-else-if="level === 2">B</span>
            <span v-else-if="level === 3">C</span>
            <span v-else>D</span>
        </p>

        <hr>
        <h2>for列表渲染</h2>
        <div class="student">
            <span v-for="(name, index) in names">
                [[ index + 1 ]] [[ name ]]
            </span>
        </div>
        <ul>
             <li v-for="student in students">
                 姓名: [[ student.name ]],
                 性别: [[ student.sex ]],
                 年龄: [[ student.age ]]
             </li>
        </ul>

        <hr>
        <h2>事件 methods</h2>
        <p>
            <button v-on:click="login">登录</button>
            <button v-on:click="login2('陈若涵')">显示姓名登录</button>
            <button v-on:click="add(80, 40)">两个数加法</button>
            <button v-on:click="subtraction(60, 60)">两个数减法</button>
            <button v-on:click="multiplication(10, 40)">两个数乘法</button>
            <button v-on:click="division(0, 10)">两个数除法</button>
        </p>
        <hr>
        <h2>model表单输入绑定(双向绑定数据)</h2>
        <div class="input01">
            <input type="number" v-model="num1">
            <select v-model="operator">
                <option value="+"> + </option>
                <option value="-"> - </option>
                <option value="*"> * </option>
                <option value="/"> / </option>
            </select>
            <input type="number" v-model="num2">
            <button @click="num_operator"> = </button>
            [[ result ]]
            <p>[[ num1 ]] [[ operator ]] [[ num2 ]] = [[ result ]]</p>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            delimiters: ['[[',']]'],
            data: {
                message:'欢迎您 Vue!!!',
                loginMsg: '用户名或密码不正确',
                baidu_url: 'http://www.baidu.com',
                tengxun_url: 'http://www.qq.com',
                seen:true,
                isLogin:false,
                level:  2,
                names: [
                    '曹汉超', '陈丽瑶', '陈若涵', '杜小杰', '冯旭童', '高梦阳',
                    '高钰涵', '葛旭伟', '郭鸿宇', '韩宇博', '侯佳敏',  '胡向阳',
                    '焦鹏新', '李海兵', '李明航', '李强', '李诗阳',  '栗世博',
                    '刘田诺伊', '马智慧', '阮俊杰', '申天乐', '万福森',  '王晓佳',                             
                    '王瑞雪', '王玉', '魏子豪', '武嘉兴', '邢家乐',  '徐密正',
                    '杨志伟', '袁丞琳', '张宇辉', '赵开心', '赵妍然',  '周浩然'
                ],
                students: [
                    {
                        'name': '陈丽瑶',
                        'sex': '女',
                        'age': 19,

                    },
                    {
                        'name': '陈若涵',
                        'sex': '女',
                        'age': 19,

                    },
                    {
                        'name': '曹汉超',
                        'sex': '男',
                        'age': 20,

                    },
                    {
                        'name': '冯旭童',
                        'sex': '男',
                        'age': 20,

                    }
                ],
                num1: 0,
                num2: 0,
                result: 0,
                operator: '+'
            },
            //.事件
            methods:{
                login:function(){
                    alert('欢迎您登录！！！');

                },
                login2:function(name){
                    alert('欢迎您登录！！！' + name);

                },
                add: function(a, b) {
                    result = a + b
                    alert(a + '+' + b + ' = ' + result);
                },
                subtraction: function(a, b) {
                    result = a - b
                    alert(a + '-' + b + ' = ' + result);
                },
                multiplication: function(a, b) {
                    result = a * b
                    alert(a + '*' + b + ' = ' + result);
                },
                division: function(a, b) {
                  
                    if (b!=0) {
                        alert('错误:除数不能为0!!!');
                        return;
                    }
                    result = a / b
                    alert(a + '/' + b + ' = ' + result);
                    
                },
                //实现加减乘除
                num_operator: function() {
                    if (this.operator == '+')
                        this.result = parseInt(this.num1) + parseInt(this.num2);
                    else if (this.operator == '-')
                        this.result =  this.num1 - this.num2;
                    else if (this.operator == '*')
                        this.result =  this.num1 * this.num2;
                    else if (this.operator == '/')
                        this.result =  this.num1 / this.num2;
                    else
                        this.result = 0
                },
            },
             
        });
    </script>
</body>
</html>